<script setup="ts">
definePageMeta({
  layout: "flat",
})

useHead({
  title: 'HLS: Расписание',
})

const urlHome = useUrlRasp();
const codeOtd = ref(0);

const userSearch = ref('');

const {pending, data: users, error} = await useLazyFetch(`${urlHome.value}rasp/`)

const {data: listOtd, execute, refresh} = await useLazyFetch(`${urlHome.value}rasp/list_otd`, {
  query: {
    otd: codeOtd
  }
})
const yearSelect = ref(2024)
const SelectOtd = ref([]);
SelectOtd.value = listOtd.value;
const otdInput = ref(0)

const filtered = computed(() => users.value.filter((user) => user.fam.toLowerCase().indexOf(userSearch.value.toLowerCase()) >= 0))
</script>

<template>
  <div>
    <h1></h1>
    <br>
    <h1>Меню</h1>
    <br>
    {{otdInput}}
    <ul>
      <li class="pb-2">
        <NuxtLink to="/menu">
          <UButton>Назад</UButton>
        </NuxtLink>
      </li>
    </ul>

	<div class="max-w-xs">
		<UInput color="primary" size="md" variant="outline" placeholder="Искать по номеру карты..."
     v-model="yearSelect"
		 v-on:keyup.enter="onEnter" />
	</div>

  <div>
		<USelectMenu ref="theInput" :ui="{ height: 'max-h-60' }" searchable
			searchable-placeholder="Выбрать отделение..." 
      placeholder="Выберите отделение" color="primary"
			v-model="otdInput" :options="listOtd" 
      option-attribute="name_otd"
      value-attribute="id"
			:search-attributes="['otd', 'name_otd']" />
	</div>

    <UInput v-model="userSearch" label="Имя пользователя" />
    <div v-if="pending">Loading...</div>
    <div v-else>
      <ul>
        <li v-for="user in filtered">
          <div>{{user.fam}} {{user.im}} {{user.ot}}</div>
        </li>
      </ul>
    </div>

  </div>
</template>
